<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
// import { useIcon } from '@/hooks/web/useIcon'
import { reactive, watch, ref } from 'vue'

import { ElForm, ElFormItem, ElInput, ElRow, ElCol, FormInstance, FormRules } from 'element-plus'

//表单验证
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<form>>({
  name: [{ required: true, message: '运输方式必填', trigger: 'blur' }],
  min: [{ required: true, message: '最短天数必填', trigger: 'blur' }],
  max: [{ required: true, message: '最长天数必填', trigger: 'blur' }],
  predict: [{ required: true, message: '预计到货天数必填', trigger: 'blur' }]
})

const { t } = useI18n()

// const addIcon = useIcon({ icon: 'gala:add' })
// const delIcon = useIcon({ icon: 'material-symbols:delete-outline' })

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.name = currentRow.name
    form.min = currentRow.min
    form.max = currentRow.max
    form.predict = currentRow.predict
    form.custom_min = currentRow.customs_min
    form.custom_max = currentRow.customs_max
    form.endplace_min = currentRow.endplace_min
    form.endplace_max = currentRow.endplace_maxs

    if (JSON.parse(currentRow.density).length > 0) {
      form.density = JSON.parse(currentRow.density).length
      form.densityList = JSON.parse(currentRow.density)
    }
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  id: '',
  name: '',
  min: '',
  max: '',
  predict: '',
  custom_min: '',
  custom_max: '',
  endplace_min: '',
  endplace_max: '',
  density: '',
  simplifiedCode: '',
  densityList: []
})

const setDensityNum = () => {
  console.log('---设置区间数量---')
  if (form.density) {
    for (let i = 0; i < form.density; i++) {
      form.densityList.push({
        price: '',
        min: '',
        max: ''
      })
    }
  } else {
    form.densityList = []
  }
}

const minMaxDayInput = () => {
  form.transitPeriod = `${form.min} - ${form.max}天`
}

defineExpose({
  getFormData: () => {
    return form
  },
  getRlus: () => {
    return ruleFormRef
  }
})
</script>

<template>
  <ElForm :model="form" ref="ruleFormRef" label-width="auto" :rules="rules">
    <ElRow>
      <ElCol :span="6">
        <ElFormItem label-width="150px" prop="name" :label="t('router.transport')">
          <ElInput v-model="form.name" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" prop="min" :label="t('formZD.minDay')">
          <ElInput v-model="form.min" @input="minMaxDayInput" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" prop="max" :label="t('formZD.maxDay')">
          <ElInput v-model="form.max" @input="minMaxDayInput" />
        </ElFormItem>
      </ElCol>
      <!-- <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('formZD.transitPeriod')">
          <ElInput v-model="form.transitPeriod" />
        </ElFormItem>
      </ElCol> -->
      <ElCol :span="6">
        <ElFormItem label-width="150px" prop="predict" :label="t('formZD.expectedDeliveryDays')">
          <ElInput v-model="form.predict" />
        </ElFormItem>
      </ElCol>
      <!-- <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('formZD.simplifiedCode')">
          <ElInput v-model="form.simplifiedCode" />
        </ElFormItem>
      </ElCol> -->
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('formZD.customsMinDay')">
          <ElInput v-model="form.custom_min" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('formZD.customsMaxDay')">
          <ElInput v-model="form.custom_max" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('formZD.addressMinDay')">
          <ElInput v-model="form.endplace_min" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('formZD.addressMaxDay')">
          <ElInput v-model="form.endplace_max" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('formZD.densityInterval')">
          <ElInput v-model="form.density" @input="setDensityNum" />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow v-for="(item, index) in form.densityList" :key="index">
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('formZD.intervalPrice')">
          <ElInput v-model="item.price" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('formZD.intervalMin')">
          <ElInput v-model="item.min" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('formZD.intervalMax')">
          <ElInput v-model="item.max" />
        </ElFormItem>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less">
.listForItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-col:nth-of-type(2) {
    font-size: var(--el-form-label-font-size);
    padding: 0 15px;
  }
  .el-col:nth-of-type(1) {
    padding-right: 15px;
  }
  .el-col:nth-of-type(6) {
    padding-left: 15px;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>
